import style from './index.module.less'
import { Button, ErrorBlock, Skeleton, Toast } from 'antd-mobile'
import logo from '@imgs/logo.png'
import { getRequest, postRequest } from './ajax'
import { awaitWrap } from '@js/tool'
import { useEffect, useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'
import $ from 'jquery'

async function initData (id, setLoading, setData) {
  setLoading(true)
  const [e, d] = await awaitWrap(getRequest(id))
  setLoading(false)
  if (e === null && d !== null) {
    setData(d)
  }
}

async function submitHandle (data) {
  await awaitWrap(postRequest(data))
}

function Main () {
  const p = useParams()
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState(null)
  const [hour, setHour] = useState(0)
  const [minute, setMinute] = useState(0)
  const [second, setSecond] = useState(0)
  const [end, setEnd] = useState(0)
  const [hasTime, setHasTime] = useState(true)
  const list = useMemo(() => {
    if (data && data.meetinglist && data.meetinglist instanceof Array) {
      return data.meetinglist
    }
    return []
  }, [data])
  useEffect(() => {
    if (p.id) {
      initData(p.id, setLoading, setData)
    }
  }, [p])
  useEffect(() => {
    let timer
    function loop (t) {
      const n = Date.now()
      let c = t - n
      setHasTime(c > 0)
      const h = Math.floor(c / 3600000)
      c %= 3600000
      const m = Math.floor(c / 60000)
      c %= 60000
      const s = Math.floor(c / 1000)
      setHour(h)
      setMinute(m)
      setSecond(s)
      if (c <= 0) {
        return undefined
      }
      timer = setTimeout(() => {
        loop(t)
      }, 1000)
    }
    if (data && data.header && data.header.meeting_begin_datetime) {
      const e = data.header.meeting_begin_datetime * 1000
      setEnd(e)
      loop(e)
    }
    return () => {
      timer && clearTimeout(timer)
    }
  }, [data])
  useEffect(() => {
    function resize () {
      $('html').css({
        fontSize: Math.floor($('html').width() / 375 * 20)
      })
    }
    window.addEventListener('resize', resize);
    resize();
    () => {
      window.removeEventListener('resize', resize)
    }
  }, [])
  if (loading) {
    return (
      <div className={style.loading}>
        <Skeleton.Title animated />
        <Skeleton.Paragraph animated />
      </div>
    )
  }
  if (!data) {
    return (
      <div className={style.empty}>
        <ErrorBlock status='empty' />
      </div>
    )
  }
  return (
    <div className={style.container}>
      <div className={style.header}>
        <img src={logo} className={style.logo} />
        {
          hasTime && (
            <div className={style.time}>
              <div className={style['time-top']}>距会议开始</div>
              <div className={style['time-bottom']}>
                {
                  (hour !== 0) && (
                    <>
                      <span className={style.num}>{hour}</span>
                      <span>小时</span>
                    </>
                  )
                }
                {
                  (hour !== 0 || minute !== 0) && (
                    <>
                      <span className={style.num}>{minute}</span>
                      <span>分钟</span>
                    </>
                  )
                }
                <span className={style.num}>{second}</span>
                <span>秒</span>
              </div>
            </div>
          )
        }
      </div>
      <div className={style.btn}>
        <Button color='primary' block onClick={() => {
          const content = data.header && data.header.tips ? data.header.tips : '会议还未开始'
          const m = data.header && data.header.lead_min ? data.header.lead_min : 0
          const c = end - Date.now()
          if (m === 0 || c < m * 60000) {
            submitHandle({ liveid: data.header.liveid, idno: p.id })
            window.location.href = data.header.meeting_url
          } else {
            Toast.show({
              content,
              duration: 3000
            })
          }
        }}>进入会议</Button>
      </div>
      <div className={style.title}>仲裁员培训安排</div>
      {
        list.map((li, i) => {
          return (
            <div key={i}>
              <div className={style['block-title']}>{li.title}</div>
              <div className={style.list}>
                {
                  li.content_list.map((o, j) => {
                    return (
                      <div className={style.item} key={j}>
                        <div className={style['item-date']}>{o.time}</div>
                        <div className={style['item-content']}>
                          {
                            o.content && (
                              <div className={style['item-content-item']}>
                                {o.content_title && <span className={style['item-content-label']}>{o.content_title}</span>}
                                <span>{o.content}</span>
                              </div>
                            )
                          }
                          {
                            o.speaker && (
                              <div className={style['item-content-item']}>
                                {o.speaker_title && <span className={style['item-content-label']}>{o.speaker_title}</span>}
                                <span>{o.speaker}</span>
                              </div>
                            )
                          }
                          {
                            o.compere && (
                              <div className={style['item-content-item']}>
                                {o.compere_title && <span className={style['item-content-label']}>{o.compere_title}</span>}
                                <span>{o.compere}</span>
                              </div>
                            )
                          }
                        </div>
                      </div>
                    )
                  })
                }
              </div>
            </div>
          )
        })
      }
      <div className={style.footer}>
        {data.footer && data.footer.title}
      </div>
    </div>
  )
}

export default Main
